<template>
  <van-tabs v-model:active="activeTab">
    <van-tab v-for="item in navList" :key="item.id" :title="item.text"></van-tab>
  </van-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'

// TS 接口 => 用来约束标记数据格式
interface INvaItem {
  id: string,
  text: string
}

const activeTab = ref(0)
// 泛型 < >  <INvaItem[]> 表示：navList 为数组，数组的每一项需要符合这个格式
const navList = ref<INvaItem[]>([])

// 频道数据列表
axios({
  url: '/navList',
  method: 'GET'
}).then(res => {
  navList.value = res.data.result
})
</script>

<style>
</style>
